<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>V3F - main</title>
  <link rel="stylesheet" href="../css/x.css">
  <!-- <link rel="stylesheet" href="../css/tabulator-5.5.2.min.css"> -->
  <link rel="stylesheet" href="../css/tabulator_site-5.5.2.min.css">
  <link rel="stylesheet" href="../css/main.css">
</head>

<body>
  <header>
    <h1>V3F</h1>
  </header>
  <aside>
    <nav>
      <!-- TODO: -->
    </nav>
  </aside>
  <main>
    <fieldset id="fdsTasks">
      <legend>Tasks</legend>
      <button id="btnRefreshTasks">Refresh</button>
      <button id="btnDeleteTask" hidden disabled>Delete</button>
      <button id="btnEditTask" hidden disabled>Edit</button>
      <button id="btnAddTask">Add</button>
      <button id="btnTry">Try</button>
      <label id="lblTryResult"></label>

      <fieldset id="fdsTaskAdd" hidden>
        <legend>Add Task</legend>
        <input type="hidden" id="hidTaskID" name="taskID">
        <label for="txtTaskName">Task Name: </label>
        <input id="txtTaskName" name="taskName" type="text">
        <label for="txaTaskDetail">Task Detail: </label>
        <textarea id="txaTaskDetail" name="taskDetail"></textarea>
        <button id="btnCancelTask">Cancel</button>
        <button id="btnSaveTask">Save</button>
      </fieldset>

      <div id="tbTasks"></div>
    </fieldset>
    <fieldset id="fdsTaskWatcher">
      <legend>Task Watcher</legend>
      <ol id="olTaskLogs"></ol>
    </fieldset>
  </main>
  <footer>
    <!-- TODO: -->
  </footer>
  <script src="../js/jquery-3.7.1.min.js"></script>
  <script src="../js/tabulator-5.5.2.min.js"></script>
  <!-- <script src="../js/tabulator-5.5.2-jquery_wrapper.js"></script> -->
  <script src="../js/x.js"></script>
  <script src="../js/main.js"></script>
</body>

</html>